<template>

 <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
  <div class="infoModal">仪表编辑</div>

  <a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"  class="formVideoModel">
    <a-form-model-item label="所属区域" ref="county"  prop="county" :autoLink="false">
     <a-cascader v-model="form.county" :options="options" placeholder="请选择省市区县" @change="validateField"/>
    </a-form-model-item>
    <a-form-model-item label="关联合同名称" ref="contractName"  prop="contractName">
      <ContractSelect v-model="form.contractName"  @update="validateFieldContractName"  v-bind:fromCityList="form.contractName"></ContractSelect>
    </a-form-model-item>
    <a-form-model-item label="仪表仪器名称" ref="meterName"  prop="meterName">
      <a-input v-model="form.meterName" />
    </a-form-model-item>
    <a-form-model-item label="型号" ref="meterType"  prop="meterType">
      <a-input v-model="form.meterType" />
    </a-form-model-item>
    <a-form-model-item label="数量" ref="meterNum"  prop="meterNum">
      <a-input v-model="form.meterNum" />
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 20, offset: 10 }">
      <a-button type="primary" @click="onSubmit">
        提交
      </a-button>
      <a-button style="margin-left: 10px;" @click="cancelEvent">
        取消
      </a-button>
    </a-form-model-item>
  </a-form-model>
 </a-modal>
</template>
<script>
import { modifydwMeter } from '@/api/video'
import CitySelect from '@/views/videoManage/util/citySelect'
import ContractSelect from '@/views/videoManage/util/contractSelect'
import AreaJson from '@/views/videoManage/util/area'
export default {
  props:['info'],
  components:{CitySelect,ContractSelect}, 
  data() {
    return {
      options:[],
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form: {},
      rules: {
        contractName: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        county: [{ required: true, message: '请选择区域', trigger: 'change' }],
        meterName: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        meterNum: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        meterType: [{ required: true, message: '请输入完整', trigger: 'blur' }],
      },


    };
  },
   created(){
   this.options = AreaJson 
  },
  mounted(){
   this.form = JSON.parse(JSON.stringify(this.info))
   this.form.county = this.form.county.split(",")
  },
  methods: {
     //手动再验证 区县
     validateField(e) {
      this.form.county =e
      this.$refs.ruleForm.validateField('county');
     },
     validateFieldContractName(e){
      // this.contractName =e
      this.form.contractName =e
      this.$refs.ruleForm.validateField('contractName');
     },
    onSubmit() {
       this.$refs.ruleForm.validate((valid) => {
        if (valid) {
           let form = JSON.parse(JSON.stringify(this.form)) 
           form.county = form.county.toString()       
            modifydwMeter(form).then((response) => {
              if (response != undefined) {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '编辑成功!',
                    duration: 3,
                  })
                  this.$emit('successEvent')
                }
              }
            })
         
        } else {
          return false
        }
      })
    },
    cancelEvent() {
      this.$emit('cancelEvent')
    },
  },
};
</script>
